<template>
  <div class="uploadimg">
    <el-col
      :span="12"
      v-if="videoForm.Video != '' && videoForm.videoFlag == true"
      class="videoBox"
    >
      <div class="videotips">
        <span><i class="el-icon-delete" @click="deleteVideo"></i></span>
      </div>
      <video
        style="width: 100%; height: 100%"
        :src="videoForm.Video"
        class="avatar"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
    </el-col>
    <template v-else>
      <ele-upload-image
        :fileSize="10"
        :action="baseURL + uploadUrl"
        v-model="imgModels"
        :size="sizeimg"
        :responseFn="handleResponse"
        :isShowTip="false"
        :multiple="multipleopen"
        :headers="headersobj"
        @input="uploadinput"
        :isver="isvers"
        :width="imgWidth"
        :isb="isbigs"
        :isDelete="isdeleteicon"
        :isDisable="isDisable"
        @deleteimg="deleteimg"
        @video="getVideo"
        :imgLists="imgList"
        :limtNum="limtNum"
        :data="filedata"
      ></ele-upload-image>
      <div class="tipcontent" v-if="isshowText">
        <slot name="text">
          <slot name="loadtemplate"></slot>
        </slot>
      </div>
    </template>
  </div>
</template>

<script>
// 图片上传组件
import EleUploadImage from "./component/eleUploadImage/eleUploadImagem";
import { getToken } from "@/utils/auth";
//上传图片的路径

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      imgModels: "",
      //上传图片接口
      uploadUrl: "common/uploadfile",
      //上传图片 token
      headersobj: {
        token: getToken(),
      },
      //当图片上传数大于1时 隐藏文字
      isshowText: true,
      videoForm: {},

    };
  },
  props: {
    //限制上传几张图片
    limtNum: Number,
    imgList: {
      type: Array,
      default: () => {
        return [];
      },
    },

    //是否禁止上传
    isDisable: {
      type: Boolean,
      default: false,
    },
    //是否显示删除按钮
    isdeleteicon: {
      type: Boolean,
      default: true,
    },
    isbigs: {
      type: Boolean,
      default: false,
    },
    imgWidth: {
      type: Number,
      default: 150,
    },
    isvers: {
      type: Boolean,
      default: true,
    },
    showtype: "",
    //图片数据绑定
    imgModel: "",
    filedata: {
      type: Object,
      default: ()=>{
        return {}
      },
    },
    //上传组件的宽度大小
    sizeimg: {
      typs: Number,
      default: 75,
    },
    //是否开启多图上传？
    multipleopen: {
      type: Boolean,
      default: false,
    },
    //最多上传几张
    limitNum: Number,
  },
  methods: {
    handleResponse(response, file, fileList) {
      console.log(response);
      //通知父组件 已经上传好了
      this.$emit("uploadimgok", response.data);
      // 根据响应结果, 设置 URL
      return response.data;
    },
    uploadinput(val) {
      if (this.multipleopen && val.length > 0) {
        this.isshowText = false;
      } else {
        this.isshowText = true;
      }
    },
    deleteimg(index) {
      this.$emit("deleteimg", index);
    },
    getVideo(val) {
      this.videoForm = val;
      // this.$emit("uploadimgok", val);
    },
    deleteVideo() {
      this.videoForm = {};
      this.imgModels = "";
    },
  },
  components: {
    EleUploadImage,
  },
  watch: {
    imgModel(val) {
      console.log(typeof val === "string", val);
      if (typeof val === "string") {
        this.imgModels = val;
      } else {
        this.imgModels = val.head_img;
        this.videoForm.Video = val.head_img;
        if (val.head_type == "video") {
          this.videoForm.videoFlag = true;
        } else {
          this.videoForm.videoFlag = false;
        }
      }
    },
 
  },
};
</script>

<style scoped lang='scss'>
.uploadimg {
  display: flex;

  .videoBox {
    position: relative;
    &:hover .videotips {
      opacity: 1;
    }
    .videotips {
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      position: absolute;
      margin-left: -25px;
      margin-top: -25px;
      z-index: 9;
      background-color: rgba(0, 0, 0, 0.3);
      opacity: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
.tipcontent {
  margin-left: 10px;
  span {
    display: block;
    font-size: 12px;
    line-height: 24px !important;
    color: #999 !important;
  }
}
</style>
